昨天還少講了一個最最最常用到的 x-model。如同他的樣子，跟 v-model、wire:model 一樣都是拿來綁定資料用的。由於前面也有介紹過 Livewire 的 wire:model 了，用起來跟 AlpineJS 的也都差不多，就邊看邊複習一下吧！

x-model

很方便的用於綁定<input>資料，當輸入時也會同步更新放在 x-model 中的值。當然在其他地方更新該值的話，放在<input>中的值也會隨之變化。

<div x-data="{ message: '' }">
    <input type="text" x-model="message">
 
    <span x-text="message">
</div>

x-model 能用在以下的元素：

• <input type="text">
• <textarea>
• <input type="checkbox">
• <input type="radio">
• <select>

Text inputs

<input type="text" x-model="message">

Textarea inputs

<textarea x-model="message"></textarea>

Checkbox inputs

＊單選

預設的話值會是 Boolean 型態。

<input type="checkbox" id="checkbox" x-model="show">

＊多選

多選的話會存成陣列，但記得宣告時預設值要給陣列[]，不然一樣會變 Boolean。

<div x-data="{ colors: [] }">
	<input type="checkbox" value="red" x-model="colors">
	<input type="checkbox" value="orange" x-model="colors">
	<input type="checkbox" value="yellow" x-model="colors">
</div>

Radio inputs

<input type="radio" value="yes" x-model="answer">
<input type="radio" value="no" x-model="answer">
 
Answer: <span x-text="answer"></span>

Select

<select x-model="color">
    <option>Red</option>
    <option>Orange</option>
    <option>Yellow</option>
</select>
 
Color: <span x-text="color"></span>

修飾符

這個單元不並陌生，因為我們在 Livewire 中的 wire:model 也有提到過類似的修飾功能。

.lazy

在預設的狀況下，在文字輸入匡 <input> 中每輸入一個字都會觸發一次 x-model 的更新，這樣會導致打字時畫面閃爍以及延遲等問題，不過我們能夠透過 .lazy 來改善這問題。.lazy 會在滑鼠聚焦移開輸入匡時才使 x-model 的值來更新。

<input type="text" x-model.lazy="title">

.number

可以使文字輸入匡<input>輸入的值自動轉為數字。輸入非數字的字元時將不會觸發更新。

<input type="text" x-model.number="age">

.debounce

..debounce 能在固定時間去觸發 x-model 的更新，預設為 250ms。

<input type="text" x-model.debounce="search">

如果要更改更新的頻率直接加在後在就可以了，如 x-model.debounce.1000ms

.throttle

跟上面的 .debounce 非常類似，但差別是 .throttle 是限制在更新後的指定秒數內不做更新的偵測，預設也是 250ms。

<input type="text" x-model.throttle="search">

因此假設設定為 1000ms 當你快速輸入 123 並在一千毫秒內多打幾個字變成 12345，結果值仍然會是 123。必須到一千毫秒後再繼續輸入成 123456 這時值才會跟著更新。